import QtQuick 1.0

/*
 Game View ..this is where magic happens
 */
Item {
    id: gameView
    opacity: 0

    property int counter: 0


    function addItemToList(word){            
        gameWords.append({"word": word});
    }

    function clearList(){
        gameWords.clear();
        counter = 0
        youWin.opacity = 0
    }

    Column {
        id:wordColumn
        x: 18
        y: 75
        width: 331
        height: 478
        spacing: 34

        Repeater{
            model: gameWords
            delegate: gameWordDelegate
        }
    }

    ListModel {
        id: gameWords
    }

    Component  {
        id: gameWordDelegate

        BorderImage{
            id: listItem
            height: 83
            width: 300

            property bool selected: false

            source: mouseArea3.pressed ? "qrc:/rectYellow" :"qrc:/rectBlue"
            border { left: 5; top: 5; right: 5; bottom: 5 }
            horizontalTileMode: BorderImage.Repeat
            verticalTileMode: BorderImage.Repeat
            x:25

            Text {
                id: wordText
                text: word
                anchors.centerIn: parent
                font.pixelSize: 24
                color: "white"
            }
            Image{
                id:coin
                source: "qrc:/coin"
                opacity: 0
                anchors.verticalCenter: parent.verticalCenter
                anchors.right: parent.right
                anchors.rightMargin: 10
            }

            MouseArea{
                id:mouseArea3
                anchors.fill: parent
                onClicked:{                                        
                    wordText.color = "white";
                    listItem.source = "qrc:/rectGray";
                    coin.opacity = 1;

                    if( !selected ){
                        selected = true;
                        counter++;
                    }

                    if ( counter == 4 ) {
                        youWin.opacity = 1;
                    }
                }
            }
        }
    }
    Image {
        id: youWin
        opacity: 0
        source: "qrc:/youWin"

        MouseArea{
            anchors.fill: parent
            onClicked: {
                screen.state = "vocabularySelectionView";
            }
        }

    }
}
